<template>
	<div class="card content-box">
		<span class="text">复制指令 🍇🍇🍇🍓🍓🍓</span>
		<div class="box-content">
			<el-input placeholder="请输入内容" v-model="data" style="width: 500px">
				<template #append>
					<el-button v-copy="data">复制</el-button>
				</template>
			</el-input>
		</div>
		<div class="box-content">
			<el-input placeholder="请输入内容" v-model="data2" style="width: 500px">
				<template #append>
					<el-button @click="onCopy">复制</el-button>
				</template>
			</el-input>
		</div>
	</div>
</template>

<script setup lang="ts" name="copyDirect">
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import { copy } from '@/utils/util'

const data = ref<string>('指令复制演示 🍒 🍉 🍊')
const data2 = ref<string>('函数复制演示 🍒 🍉 🍊')

const onCopy = () => {
	copy(data2.value)
	ElMessageBox({
		title: '温馨提示',
		type: 'success',
		message: '复制成功，去粘贴看看吧'
	})
}
</script>

<style scoped lang="scss">
@import './index.scss';
</style>
